<template>
  <div class="container">
    <div class="searchbar" v-show="querybarVisible">
      <el-form :model="queryForm" ref="queryForm" inline>
        <el-form-item label="应用系统名称" prop="appname">
           <el-autocomplete
            v-model="queryForm.appname"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入应用系统名称"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchData"
            >搜索</el-button
          ></el-form-item
        >
        <el-form-item>
          <el-button type="warning" icon="el-icon-refresh" @click="resetData"
            >重置</el-button
          ></el-form-item
        >
      </el-form>
    </div>
    <div class="main">
      <div class="toolbar">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="createHost"
            >添加</el-button
          >
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button type="success" icon="el-icon-refresh" @click="queryHosts"
            >刷新</el-button
          >
        </el-button-group>
        <el-button
          type="primary"
          class="right-toolbar"
          plain
          icon="el-icon-search"
          @click="querybarVisible = !querybarVisible"
        ></el-button>
      </div>
      <el-table :data="hostData" style="width: 100%" border>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="ipaddr" label="主机地址"> </el-table-column>
        <el-table-column prop="appid" label="系统名称"> </el-table-column>
        <el-table-column prop="os" label="操作系统"> </el-table-column>
        <el-table-column prop="dbs" label="数据库"> </el-table-column>
        <el-table-column prop="env" label="环境类型">
          <template slot-scope="scope"
            ><span v-if="scope.row.env == '1'">验证环境</span>
            <span v-else-if="scope.row.env == '2'">压测环境</span>
            <span v-else-if="scope.row.env == '3'">测试环境</span>
            <span v-else-if="scope.row.env == '4'">开发环境</span></template
          ></el-table-column
        >
        <el-table-column prop="purpose" label="用途描述"> </el-table-column>
        <el-table-column label="操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleHostEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-s-order"
              @click="handleHostAccount(scope.$index, scope.row)"
              >主机账户</el-button
            >
            <el-button
              type="text"
              icon="el-icon-s-order"
              @click="handleDbAccount(scope.$index, scope.row)"
              >数据库账户</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="totalCount"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- dialog -- 添加/编辑主机 -->
    <el-dialog
      :title="hostDialogOptions.title"
      :visible.sync="hostDialogOptions.visible"
      width="30%"
      :close-on-click-modal="false"
      @close="hostDialogOptions.visible = false"
    >
      <el-form
        :model="hostForm"
        :rules="hostRules"
        ref="hostForm"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="主机地址" prop="ipaddr">
          <el-input v-model="hostForm.ipaddr"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="appid">
          <el-select
            v-model="hostForm.appid"
            style="width:100%"
            placeholder="请选择项目名称"
          >
            <el-option
              v-for="item in appOptions"
              :label="item.name"
              :key="item.appid"
              :value="item.appid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作系统" prop="os">
          <el-input v-model="hostForm.os"></el-input>
        </el-form-item>
        <el-form-item label="数据库" prop="dbs">
          <el-input v-model="hostForm.dbs"></el-input>
        </el-form-item>
        <el-form-item label="环境类型" prop="env">
          <el-select
            v-model="hostForm.env"
            style="width:100%"
            placeholder="请选择项目名称"
          >
            <el-option
              v-for="item in envOptions"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用途描述" prop="purpose">
          <el-input
            v-model="hostForm.purpose"
            type="textarea"
            class="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hostDialogOptions.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleHost(hostDialogOptions.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <v-host-account
      :visible="hostAccountDialogVisible"
      @close-account-dialog="hostAccountDialogVisible = false"
      :hostid="hostid"
    ></v-host-account>
    <v-db-account
      :visible="dbAccountDialogVisible"
      @close-account-dialog="dbAccountDialogVisible = false"
      :hostid="hostid"
    ></v-db-account>
  </div>
</template>

<script>
import service from "../../api/service.js";
import vHostAccount from "../children/HostAccount.vue";
import vDbAccount from "../children/DbAccount.vue";

export default {
  components: { vHostAccount, vDbAccount },
  data() {
    return {
      hostid:0,
      hostAccountDialogVisible: false,
      dbAccountDialogVisible: false,
      // 搜索栏是否显示
      querybarVisible: true,
      // 搜索表单
      queryForm: {
        appid: null
      },
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      hostData: [],
      hostForm: {
        hostid: 0,
        appid: null,
        ipaddr: "",
        os: "",
        dbs: "",
        env: null,
        purpose: ""
      },
      hostRules: {
        appid: { required: true, message: "请选择项目", trigger: "change" },
        ipaddr: {
          required: true,
          min: 8,
          message: "请输入主机地址",
          trigger: "blur"
        },
        os: {
          required: true,
          min: 2,
          message: "请输入操作系统名称",
          trigger: "blur"
        },
        dbs: {
          required: true,
          min: 2,
          message: "请输入数据库名称",
          trigger: "blur"
        },
        env: {
          required: true,
          message: "请选择环境",
          trigger: "change"
        }
      },
      hostDialogOptions: {
        id: 0,
        visible: false,
        title: "添加主机信息"
      },
      envOptions: [
        { label: "验证环境", value: "1" },
        { label: "压测环境", value: "2" },
        { label: "测试环境", value: "3" },
        { label: "开发环境", value: "4" }
      ],
      appOptions: []
    };
  },
  mounted() {
   service.getApps().then(resp => {
      if (resp) {
        resp.forEach(s => (s.value = s.appname));
        this.appOptions = resp;
      }
    });
    this.queryHosts();
  },
  methods: {
    querySearchAsync(queryString, cb) {
      var appOptions = this.appOptions;
      var results = queryString
        ? appOptions.filter(this.createStateFilter(queryString))
        : appOptions;
      cb(results);
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    handleSelect(item) {
      this.queryForm.appid = item.appid;
    },
    handleHostAccount(idx, row) {
      this.hostAccountDialogVisible = true;
      this.hostid = row.hostid;
    },
    handleDbAccount(idx, row) {
      this.dbAccountDialogVisible = true;
      this.hostid = row.hostid;
    },
    handleHostEdit(idx, row) {
      this.resetHostForm();
      this.hostDialogOptions = {
        id: row.hostid,
        visible: true,
        title: "编辑主机信息"
      };
      Object.assign(this.hostForm, row);
    },
    resetHostForm() {
      this.hostForm = {
        id: 0,
        appid: null,
        ipaddr: "",
        os: "",
        dbs: "",
        env: null,
        purpose: ""
      };
      if (this.$refs["hostForm"] !== undefined) {
        this.$refs["hostForm"].resetFields();
      }
    },
    createHost() {
      this.resetHostForm();
      this.hostDialogOptions = {
        id: 0,
        visible: true,
        title: "添加主机信息"
      };
    },
    /*
     * 分页查询
     */
    handlePageChange(val) {
      this.pageIndex = val;
      this.queryHosts();
    },
    /*
     * 分页查询组件信息
     */
    queryHosts() {
      let _this = this;
      this.loading = true;
      service
        .queryHosts(
          this.pageIndex,
          this.pageSize,
          this.queryForm.appid ? this.queryForm.appid : 0
        )
        .then(resp => {
          if (resp) {
            _this.hostData = resp.content;
            _this.totalCount = resp.totalElements;
          }
          _this.loading = false;
        });
    },
    /*
     *新增或编辑主机信息
     */
    handleHost(id) {
      let _this = this;
      this.$refs["hostForm"].validate(valid => {
        if (valid) {
          // 添加主机
          if (id == 0) {
            service.createHost(_this.hostForm).then(resp => {
              if (resp) {
                _this.$message({
                  message: "保存主机信息成功",
                  type: "success"
                });
                _this.hostData.push(resp);
                _this.resetHostForm();
              }
            });
          } else {
            // 编辑主机
            service.updateHost(_this.hostForm).then(resp => {
              if (resp) {
                _this.$message({
                  message: "保存主机信息成功",
                  type: "success"
                });
                let row = _this.hostData.find(c => c.hostid == id);
                Object.assign(row, _this.hostForm);
                _this.resetHostForm();
              } else {
                _this.$message({
                  message: "保存主机信息异常",
                  type: "warning"
                });
              }
            });
          }
          _this.hostDialogOptions.visible = false;
        } else {
          _this.$message.error("保存主机信息失败");
          return false;
        }
      });
    },
    searchData() {
      this.queryHosts();
    },
    resetData() {
      this.queryForm = {
        appid: null
      };
    }
  }
};
</script>

<style>
</style>